<template>
	<view class="content">
		<image class="bg-image" mode="aspectFill" :src="computedBGSrc"></image>
		<view class="login-box">
			<image v-if="computedLogoSrc" class="logo" mode="widthFix" :src="computedLogoSrc"></image>
			<view v-if="logo.logoTitle" style="font-size: 52rpx; font-weight: bold;">{{ logo.logoTitle }}</view>
			<view v-if="logo.logoCode" style="margin: 45rpx auto 100rpx;">
				<view style="font-size: 30rpx; background-color: #509bfb; display: inline-block; border-radius: 10rpx; padding: 5rpx 10rpx; color: #ffffff;">
				    {{ logo.logoCode }}
				</view>
			</view>

			<view class="input-box">
				<!-- 账号输入 -->
				<view class="input-item" :style="{ borderRadius: input.radius }">
					<input v-model="userCredentials" type="text" :placeholder="input.userNamePlaceholder" />
				</view>

				<!-- 密码输入 -->
				<view class="input-item" :style="{ borderRadius: input.radius }">
					<input v-model="userPassword" :type="eyeStatus ? 'text' : 'password'"
						:placeholder="input.passwordPlaceholder" />
					<image style="width: 32rpx; height: 32rpx; padding-right: 10rpx;" :src="eyeIcon" mode="widthFix"
						@click="handleEye"></image>
				</view>

				<view class="agreement">
					<view class="checkbox-wrapper" @click="togglePrivacyCheck">
						<view class="checkbox" :class="{ 'checked': privacyChecked }">
							<text v-if="privacyChecked" class="checkbox-inner">✓</text>
						</view>
						<text class="agreement-text">我已阅读并同意</text>
					</view>
					<text class="link" @click="openAgreement('service')">{{agreements.service.text}}</text>
					<text class="agreement-text">和</text>
					<text class="link" @click="openAgreement('privacy')">{{agreements.privacy.text}}</text>
				</view>

				<!-- 登录按钮 -->
				<button class="login-btn" @click="handleLogin">登录</button>

				<!-- 辅助链接 -->
				<view class="helper-links">
					<text v-for="(item, index) in account" :key="item.title"
						@click="handleAccout(index)">{{item.title}}</text>
				</view>
			</view>

			<!-- 第三方登录 -->
			<view v-if="computedThirdParty.length>0" class="third-party">
				<view class="divider">
					<text>其他账号登录</text>
				</view>
				<view class="third-party-icons">
					<image v-for="item in computedThirdParty" :key="item.type"
						:style="{ width: item.size || '64rpx', height: item.size || '64rpx' }" mode="widthFix"
						:src="item.icon" @click="handleThirdLogin(item.type)"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Login',
		props: {
			bgSrc: {
				type: String,
				default: '/uni_modules/wty-login/static/wty-login/login-bg.svg' // 默认logo路径
			},
			logo: {
				type: Object,
				default: {}
			},
			agreements: {
				type: Object,
				default: () => ({
					service: {
						text: '《用户协议》',
						url: ''
					},
					privacy: {
						text: '《隐私政策》',
						url: ''
					}
				})
			},
			input: {
				type: Object,
				default: () => ({
					userNamePlaceholder: '请输入账号',
					passwordPlaceholder: '请输入密码',
					radius: '10rpx'
				})
			},
			account: {
				type: Array,
				default: () => []
			},
			thirdParty: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			// 使用计算属性处理路径
			computedBGSrc() {
				return this.bgSrc ? ('../../../..' + this.bgSrc) : '/uni_modules/wty-login/static/wty-login/logo.png'
			},
			computedLogoSrc() {
				if (this.logo.logoSrc) {
					return '../../../..' + this.logo.logoSrc
				} else {
					return null
				}
			},

			computedThirdParty() {
				let dataArray = JSON.parse(JSON.stringify(this.thirdParty))
				let iconSize = '64rpx'
				let loginTypes = []
				dataArray.forEach(item => {
					item.icon = item.icon ? ('../../../..' + item.icon) : (
						'/uni_modules/wty-login/static/wty-login/' + item.type + '.svg')
					if (item.size === undefined || Number(item.size.toNum) === 0) {
						item.size = iconSize
					} else {
						iconSize = item.size
					}
					switch (item.type) {
						case 'wechat': {
							if (plus.runtime.isApplicationExist({
									pname: 'com.tencent.mm',
									action: 'weixin://'
								})) {
								// 已安装微信
								loginTypes.push(item)
							}
						}
						break;
						case 'qq': {
							if (plus.runtime.isApplicationExist({
									pname: 'com.tencent.mobileqq',
									action: 'mqq://'
								})) {
								// 已安装QQ
								loginTypes.push(item)
							}
						}
						break;
						case 'weibo': {
							if (plus.runtime.isApplicationExist({
									pname: 'com.sina.weibo',
									action: 'sinaweibo://'
								})) {
								// 已安装微博
								loginTypes.push(item)
							}
						}
						break;
						default: {
							loginTypes.push(item)
						}
							break
					}


				});

				return loginTypes
			}
		},
		data() {
			return {
				url: '../../static/wty-login/apple.svg',
				privacyChecked: false,
				userCredentials: '',
				userPassword: '',
				eyeStatus: false,
				eyeIcon: '/uni_modules/wty-login/static/wty-login/eyeclose.svg'
			}
		},
		methods: {
			togglePrivacyCheck() {
				this.privacyChecked = !this.privacyChecked
			},
			openAgreement(type) {
				const url = this.agreements[type]?.url
				if (!url) return

				if (url.startsWith('http')) {
					// #ifdef APP
					plus.runtime.openURL(url)
					// #endif
					// #ifdef H5
					window.open(url)
					// #endif
					// #ifdef MP
					uni.setClipboardData({
						data: url,
						success: () => {
							uni.hideToast();
						}
					});
					// #endif
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},

			// 处理第三方登录
			handleThirdLogin(type) {
				// 触发父组件的登录处理
				this.$emit('on-third-login', type)
			},

			handleLogin() {
				// 处理登录逻辑
				if (!this.privacyChecked) {
					this.showToast('请阅读并同意用户服务协议和隐私政策')
					return
				}
				if (this.userCredentials.trim().length === 0 || this.userPassword.trim().length === 0) {
					this.showToast('用户名或密码不可为空')
					return
				}
				this.$emit('on-login', {
					userName: this.userCredentials,
					password: this.userPassword
				})
			},
			handleEye() {
				this.eyeStatus = !this.eyeStatus
				this.eyeIcon = this.eyeStatus ? '/uni_modules/wty-login/static/wty-login/eyeopen.svg' :
					'/uni_modules/wty-login/static/wty-login/eyeclose.svg'
			},
			handleAccout(value) {
				this.$emit('on-account', value)
			},

			showToast(options) {
				uni.showToast({
					title: options,
					icon: 'none',
					position: 'bottom',
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100vh;
		position: fixed;
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
		overflow: hidden;
		touch-action: none;
	}

	.bg-image {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 1;
	}

	.login-box {
		width: 90%;
		padding: 30rpx;
		box-sizing: border-box;
		z-index: 2;
		border-radius: 20rpx;
	}

	.logo {
		width: 526rpx;
		height: auto;
		display: block;
		margin: 0 auto 160rpx;
	}

	.input-box {
		position: relative;
		overflow: hidden;
		touch-action: none;
	}

	.input-item {
		height: 86rpx;
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		background-color: transparent;
		border-radius: 10rpx;
		padding: 0 20rpx;
		border: 2rpx solid #ddd;
	}

	.input-item input {
		flex: 1;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.verify-code {
		padding: 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		color: #fff;
		background: linear-gradient(to right, #429DFA, #00AA7F);
		border-radius: 10rpx;
	}

	.login-btn {
		width: 100%;
		height: 85rpx;
		line-height: 85rpx;
		margin-top: 40rpx;
		background: #429DFA;
		color: #fff;
		border-radius: 40rpx;
		font-size: 32rpx;
	}

	.helper-links {
		margin-top: 30rpx;
		padding: 0 10rpx;
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		color: #b5b5b5;
	}

	.third-party {
		margin-top: 100rpx;
		text-align: center;
	}

	.divider {
		position: relative;
		font-size: 28rpx;
		color: #cbcbcb;
		margin-bottom: 30rpx;
	}

	.third-party-icons {
		display: flex;
		justify-content: center;
		gap: 40rpx;
	}

	.agreement {
		margin: 60rpx 0 20rpx 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		font-size: 26rpx;
	}

	.checkbox-wrapper {
		display: flex;
		align-items: center;
	}

	.checkbox {
		width: 25rpx;
		height: 25rpx;
		border: 2rpx solid #ddd;
		border-radius: 50%;
		margin-right: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.checkbox.checked {
		background-color: #429DFA;
		border-color: #429DFA;
	}

	.checkbox-inner {
		color: #fff;
		font-size: 24rpx;
		transform: scale(0.8);
	}

	.agreement-text {
		color: #666;
		margin: 0 4rpx;
	}

	.link {
		color: #429DFA;
		margin: 0 4rpx;
	}

	/* 添加点击效果 */
	.link:active {
		opacity: 0.8;
	}
</style>